<template>
    <div class="login-page">
        <ValidateForm @form-submit="onFormSubmit">
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
                <validate-input type="email"  aria-describedby="emailHelp" :rules="emailRules"
                    v-model="emailValue" placeholder="请输入邮箱地址">
                </validate-input>
            </div>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">昵称</label>
                <validate-input type="text"   :rules="nameRules"
                    v-model="nameValue" placeholder="请输入昵称">
                </validate-input>
            </div>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">密码</label>
                <validate-input type="password" id="exampleInputPassword2"  :rules="passwordRules"
                    v-model="passwordValue" placeholder="请输入密码">
                </validate-input>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">重复密码</label>
                <ValidateInput type="password" id="exampleInputPassword1" :rules="repeatPasswordRules" v-model="repeatPasswordValue"
                    placeholder="请再次输入密码"></ValidateInput>
            </div>
            <template v-slot:submit>
                <div class="d-grid gap-2 col-4 mx-auto">
                    <span class="btn btn-primary">Submit</span>
                </div>
            </template>
        </ValidateForm>
    </div>
</template>
<script setup lang="ts">
import ValidateForm from '@/components/ValidateForm.vue';
import ValidateInput from '@/components/ValidateInput.vue';
import { RulesProp } from '@/utlis/type';
import { useRouter } from 'vue-router';
import createMessage from '@/components/createMessage';
import { useStore } from 'vuex';
import { ref } from 'vue';
const emailValue = ref('')
const nameValue = ref('')
const passwordValue = ref('')
const repeatPasswordValue = ref('')
const router = useRouter()
const store = useStore()
//邮箱规则的定义
const emailRules : RulesProp = [
    {type:'required',message:'邮箱不能为空'},
    {type:'email',message:'邮箱格式不正确'}
]
//昵称规则的定义
const nameRules: RulesProp = [
    {type:'required',message:'昵称不能为空'},
]
//密码规则的定义
const passwordRules : RulesProp = [
    {type:'required',message:'密码不能为空'},
    {type:'password',message:'密码只包含数字'},
    {type:'range',message:'密码长度必须在6到12之间，且不能有空格',min:6,max:12},
]
const repeatPasswordRules : RulesProp = [
    {type:'required',message:'密码不能为空'},
    {type:'password',message:'密码只包含数字'},
    {type:'range',message:'密码长度必须在6到12之间，且不能有空格',min:6,max:12},
    {
        type:'custom',
        validator:() =>{
            if(passwordValue.value == repeatPasswordValue.value){
                return true
            }else{
                return false
            }
        },
        message:'密码不相同'
    }
]
const onFormSubmit = (result: boolean) => {
    if (result) {
        const payload = {
            email: emailValue.value,
            nickName: nameValue.value,
            password: passwordValue.value
        }
        console.log(payload)
        //发送register的请求，当获取到数据后，在显示跳转
        store.dispatch('register', payload).then(data=>{
            createMessage("注册成功，两秒后跳转到登录页面", 'success') 
                setTimeout(() => {
                router.push('/login')
            }, 2000)
        }).catch(e=>{
            console.log(e)
        })
    }
}
</script>
<style>

</style>